<!--

    Copyright 2010 Västra Götalandsregionen

      This library is free software; you can redistribute it and/or modify
      it under the terms of version 2.1 of the GNU Lesser General Public
      License as published by the Free Software Foundation.

      This library is distributed in the hope that it will be useful,
      but WITHOUT ANY WARRANTY; without even the implied warranty of
      MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
      GNU Lesser General Public License for more details.

      You should have received a copy of the GNU Lesser General Public
      License along with this library; if not, write to the
      Free Software Foundation, Inc., 59 Temple Place, Suite 330,
      Boston, MA 02111-1307  USA

-->
<!DOCTYPE html>
<html>
	<head>
		<title>Skrivare</title>
		
		<link rel="shortcut icon" href="http://www.vgregion.se/VGRimages/favicon.ico" type="image/x-icon" />
		
		<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.css" />
		<script src="http://code.jquery.com/jquery-1.5.2.min.js"></script>
		<script src="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.js"></script>
		
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		
		<script>
		(function($) {
		    $.QueryString = (function(a) {
		        if (a == "") return {};
		        var b = {};
		        for (var i = 0; i < a.length; ++i)
		        {
		            var p=a[i].split('=');
		            if (p.length != 2) continue;
		            b[p[0]] = decodeURIComponent(p[1].replace(/\+/g, " "));
		        }
		        return b;
		    })(window.location.search.substr(1).split('&'))
		})(jQuery);
		
		// TODO make configurable
		var apiUrl = "http://localhost:8080/app/"
		
		$(function() {
		    var printer = $.QueryString["printer"]
		    
			$.getJSON(apiUrl + 'printer/' + printer, function(data) {
			  if(data) {
				  $("#printer").val(data.id)
				  $("#printername").html(data.name)
				  $("#helptext").html(data.help)
				  $("#infotext").html(data.information)
				  
				  $(data.queues).each(function(index, queue) {
				    if(index == 0) {
				    	var option = $("<option selected='selected'></option>")
				    } else {
				    	var option = $("<option></option>")
				    }
				    option
				  		.attr("value", queue.id)
				  		.text(queue.name)
				     
				  	$("#queue").append(option)
				  })
				} else {
				  alert("Okänd skrivare")
				}
			});

			$("#reportform").submit(function() {
				console.log($(this).serialize())
				
				$.post(apiUrl + 'printer/' + printer + "/report", $(this).serialize());
				
				$("#notice").html("Tack för din felrapport")
					.show()
					.delay(5000)
					.fadeOut("slow")

				$("#error").val("")
				$("#reporter").val("")
					 
				$.mobile.changePage("#first")
				
				return false
			})
		})

		</script>

	</head>
<body> 

<div id="first" data-role="page" data-theme="b">

	<div data-role="header" data-theme="b">
		<h1 id="printername"></h1>
	</div>

	<div data-role="content" data-theme="b">
		<div id="notice"></div>
		
		<p><a href="#info">Information</a></p>
		<p><a href="#help">Hjälp</a></p>
		<p><a href="#report">Felanmäl</a></p>
	</div>
</div>

<div id="info" data-role="page" data-theme="b">

	<div data-role="header" data-theme="b">
		<h1>Information</h1>
	</div>

	<div data-role="content" data-theme="b">	
		<p id="infotext"></p>		
	</div>
</div>

<div id="help" data-role="page" data-theme="b">

	<div data-role="header" data-theme="b">
		<h1>Hjälp</h1>
	</div>

	<div data-role="content" data-theme="b">	
		<p id="helptext"></p>		
	</div>

</div>

<div id="report" data-role="page" data-theme="b">

	<div data-role="header" data-theme="b">
		<h1>Felanmäl</h1>
	</div>

	<div data-role="content" data-theme="b">	
		<form id="reportform" action=".">
		    <p><label for="queue">Skrivarkö</label>
		    	<select id="queue" name="queue"></select>
		    </p>
		    <p><label for="error">Beskrivning av fel</label><textarea name="error" id="error"></textarea></p>
		    <p><label for="reporter">Ditt VGRid (valfri)</label><input name="reporter" id="reporter"></p>
		    <div class="ui-grid-a">
		    	<input name="printer" type="hidden" id="printer">
		        <div class="ui-block-a"><input type="submit" value="Skicka"></div>
		        <div class="ui-block-b"><input type="button" value="Avbryt"></div>
		    </div>
	</div>
</div>


</body>